<template>
  <div id="register">
    <!--页面顶部-->
    <div id="nav-bottom">
      <!--顶部-->
      <div class="nav-top">
        <div class="top">
          <div class="py-container">
            <div class="shortcut">
              <ul class="fl">
                <li class="f-item">青橙欢迎您！</li>
                <li class="f-item">
                  请<a href="login.html" target="_blank">登录</a> <span><a href="register.html" target="_blank">免费注册</a></span>
                </li>
              </ul>
              <div class="fr typelist">
                <ul class="types">
                  <li class="f-item"><span>我的订单</span></li>

                  <li class="f-item">
                    <span><a href="cart.html" target="_blank">我的购物车</a></span>
                  </li>
                  <li class="f-item">
                    <span><a href="home.html" target="_blank">我的青橙</a></span>
                  </li>
                  <li class="f-item"><span>青橙会员</span></li>
                  <li class="f-item"><span>企业采购</span></li>
                  <li class="f-item"><span>关注青橙</span></li>
                  <li class="f-item">
                    <span><a href="cooperation.html" target="_blank">合作招商</a></span>
                  </li>
                  <li class="f-item">
                    <span><a href="shoplogin.html" target="_blank">商家后台</a></span>
                  </li>
                  <li class="f-item"><span>网站导航</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!--头部-->
        <div class="header">
          <div class="py-container">
            <div class="yui3-g Logo">
              <div class="yui3-u Left logoArea">
                <a class="logo-bd" title="青橙" href="index.html" target="_blank"></a>
              </div>
              <div class="yui3-u Rit searchArea">
                <div class="search">
                  <form action="" class="sui-form form-inline">
                    <!--searchAutoComplete-->
                    <div class="input-append">
                      <input type="text" id="autocomplete" class="input-error input-xxlarge" />
                      <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="register py-container ">
      <!--register-->
      <div class="registerArea">
        <h3>
          注册新用户<span class="go">我有账号，去<a href="login.html" target="_blank">登陆</a></span>
        </h3>
        <div class="info">
          <form class="sui-form form-horizontal">
            <div class="control-group">
              <label class="control-label">手机号：</label>
              <div class="controls">
                <input type="text" placeholder="请输入你的手机号" class="input-xfat input-xlarge" />
              </div>
            </div>
            <div class="control-group">
              <label for="inputPassword" class="control-label">验证码：</label>
              <div class="controls">
                <input type="text" placeholder="验证码" class="input-xfat input-xlarge" />
              </div>
            </div>
            <div class="control-group">
              <label for="inputPassword" class="control-label">登录密码：</label>
              <div class="controls">
                <input type="password" placeholder="设置登录密码" class="input-xfat input-xlarge" />
              </div>
            </div>
            <div class="control-group">
              <label for="inputPassword" class="control-label">确认密码：</label>
              <div class="controls">
                <input type="password" placeholder="再次确认密码" class="input-xfat input-xlarge" />
              </div>
            </div>
            <div class="control-group">
              <label for="inputPassword" class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
              <div class="controls"><input name="m1" type="checkbox" value="2" checked="" /><span>同意协议并注册《品优购用户协议》</span></div>
            </div>
            <div class="control-group">
              <label class="control-label"></label>
              <div class="controls btn-reg">
                <a class="sui-btn btn-block btn-xlarge btn-danger" href="home.html" target="_blank">完成注册</a>
              </div>
            </div>
          </form>
          <div class="clearfix"></div>
        </div>
      </div>
      <!--foot-->
      <div class="py-container copyright">
        <ul>
          <li>关于我们</li>
          <li>联系我们</li>
          <li>联系客服</li>
          <li>商家入驻</li>
          <li>营销中心</li>
          <li>手机品优购</li>
          <li>销售联盟</li>
          <li>品优购社区</li>
        </ul>
        <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
        <div class="beian">京ICP备08001421号京公网安备110108007702</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  created() {}
}
</script>

<style lang="less">
a {
  color: #666;
}
#register {
  .logoArea {
    height: 78px;
  }
  .btn-danger:active,
  .btn-danger.active,
  .btn-danger:hover,
  .btn-danger:focus {
    background-color: #ff4301;
    border: 1px solid #ff4301;
  }
  .logo {
    background: url(../../public/img/icons.png) no-repeat;
    width: 182px;
    height: 78px;
    position: absolute;
    background-position: -367px 4px;
  }
  .registerArea {
    margin: 15px 0;
    border: 1px solid #dfdfdf;
    font-family: '微软雅黑';
  }
  .registerArea h3 {
    background: #ececec;
    margin: 0;
    padding: 6px 15px;
    color: #333;
    border-bottom: 1px solid #dfdfdf;
  }
  h3 .go {
    font-size: 14px;
    float: right;
  }
  h3 .go a {
    color: #ff4301;
  }
  .btn-reg {
    width: 270px;
  }
  .info {
    width: 600px;
    margin: 40px auto;
  }
  .control-label {
    font-size: 14px;
  }
  .sui-form input[type='text'].input-xfat.input-xlarge,
  .sui-form input[type='password'].input-xfat.input-xlarge {
    width: 250px;
    border-radius: 0;
    border: 1px solid #999;
    height: 24px;
  }
  .sui-form .control-group label {
    *display: inline;
    *zoom: 1;
    *float: left;
  }
  #submit {
    padding: 5px 80px;
    font-family: '微软雅黑';
    background-color: #ff4301;
  }
  .reg {
    width: 221px;
  }
  .zhuce {
    *width: 221px;
    float: right;
  }
  .btn-reg .btn-danger {
    background-color: #ff713f;
    border: 1px solid #ff713f;
    padding: 6px;
    border-radius: 0;
    font-size: 16px;
    font-family: '微软雅黑';
    word-spacing: 4px;
  }
  .copyright {
    text-align: center;
    line-height: 24px;
  }
  .copyright ul li {
    list-style-type: none;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    border-right: 1px solid #e4e4e4;
    padding: 0 20px;
    margin: 15px 0;
  }
  .copyright ul li:last-child {
    border-right: 0;
  }
}
</style>
